<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>服装详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/conmon/conmon.css" />
	</head>

	<body>
		<div class="web">
			<!--头部-->
			<header>
				<div class="header_left">
					<!--隐藏菜单-->
					<div class="menu-wrap">

						<!--隐藏菜单内容-->
						<div class="cai_dan_main">
							<div class="header_left">
								<a href="" class="search-icon"><img src="img/img1/icon-search.png" /></a>
							</div>
							<div class="logo">
								<a href="index.html"><img src="img/img1/icon-logo.png" /></a>
							</div>
							
							
							<!--菜单-->
							<div class="leftsidebar_box">
								<!--<div class="line"></div>-->
								<dl class="system_log">
									<dt onClick="changeImage()">上新<img src="img/img1/select_xl01.png"></dt>
									<dd class="first_dd">
										<a href="#">你猜</a>
									</dd>
									<dd>
										<a href="#">你猜</a>
									</dd>
								</dl>

								<dl class="custom">
									<dt>服装<img src="img/img1/select_xl01.png"></dt>
									<dd class="first_dd">
										<a href="#">你猜</a>
									</dd>
									<dd>
										<a href="#">你猜</a>
									</dd>
								</dl>
								
								<dl class="channel">
									<dt onClick="changeImage()">鞋履<img src="img/img1/select_xl01.png"></dt>
									<dd class="first_dd">
										<a href="#">靴</a>
									</dd>
									<dd>
										<a href="editorial.html">休闲鞋</a>
									</dd>
									<dd>
										<a href="editorial.html">运动鞋</a>
									</dd>
									<dd>
										<a href="#">凉鞋</a>
									</dd>
								</dl>

								<dl class="app">
									<dt onClick="changeImage()">配件<img src="img/img1/select_xl01.png"></dt>
									<dd class="first_dd">
										<a href="#">你猜</a>
									</dd>
									<dd>
										<a href="#">你猜</a>
									</dd>
								</dl>
								
								<dl class="app">
									<dt onClick="changeImage()" class="disable">销售<img src="img/img1/select_xl01.png"></dt>
									<dd class="first_dd">
										<a href="#">你猜</a>
									</dd>
									<dd>
										<a href="#">你猜</a>
									</dd>
								</dl>
								
								<dl class="app">
									<dt onClick="changeImage()">品牌A-Z<img src="img/img1/select_xl01.png"></dt>
									<dd class="first_dd">
										<a href="#">你猜</a>
									</dd>
									<dd>
										<a href="#">你猜</a>
									</dd>
								</dl>
							</div>

							<div class="cai_dan_bottom">
								<ul>
									<li>
										<a href=""><img src="img/img1/icon-10-xin.png" /></a>
									</li>
									<li>
										<a href=""><img src="img/img1/icon-1.png" /></a>
									</li>
									<li>
										<a href=""><img src="img/img1/icon-11.png" /></a>
									</li>
								</ul>
							</div>
						</div>

						<button class="close-button" id="close-button">Close Menu</button>

						<div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z">
							<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none">
								<path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z" />
							</svg>
						</div>
					</div>
					<button class="menu-button" id="open-button">Open Menu</button>
					<!--隐藏菜单-->
				</div>

				<div class="header_right">
					<a href=""><img src="img/img1/icon-1.png" /></a>
				</div>

				<h5>服装</h5>
			</header>

			<section>
				<div class="cloth_main">
					<a href=""><img src="img/img1/cloth-img5.jpg" /></a>
					<h5>经典款</h5>
					<p>白色拉链牛仔夹克</p>
					<span>380$</span>
				</div>
				<div class="cloth_size">
					<ul>
						<li>XS</li>
						<li>S</li>
						<li>M</li>
						<li>XL</li>
					</ul>
				</div>
				<div class="cloth_size cloth_size1">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="cloth_font">
					<p class="first-p">背包距离Tres边。在制造与Haerfest合作。尼龙机身采用顶部拉链。皮革底部。外室与拉链和皮革装饰。可调节肩带皮革。金属硬件。内衬棉。内舱。外标志的品牌。
					</p>
					<p>背包距离Tres边。在制造与Haerfest合作。尼龙机身</p>
				</div>
				<form action="" method="post">

					<div class="car_btn">
						<input type="submit" value="加入购物车" />
					</div>
					<div class="car_btn btn-1">
						<input type="submit" value="加入心愿单" />
					</div>

				</form>
			</section>

		</div>

	</body>
	<script>
		document.body.style.height = window.innerHeight + "px";
	</script>

	<script type="text/javascript">
		/*动态改变根元素字体大小*/
		function recalc() {
			var clientWidth = document.documentElement.clientWidth;
			if(!clientWidth) return;
			document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
			//字体大小=1个rem单位表示多少个像素*(设备的宽度/设计宽度)
		}

		function initRecalc() {
			recalc();
			var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
			if(!document.addEventListener) return;
			window.addEventListener(resizeEvt, recalc, false);
			document.addEventListener('DOMContentLoaded', recalc, false);
		}
		initRecalc();
	</script>
	<!--隐藏菜单侧栏-->
	<script src="js/yjr/snap.svg-min.js"></script>
	<script src="js/yjr/main4.js"></script>
	<script src="js/yjr/classie.js"></script>

	<!--隐藏左侧菜单-->
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(".leftsidebar_box dt").css({
			"background-color": "#171616"
		});
		$(".leftsidebar_box dt img").attr("src", "img/img1/select_xl01.png");
		$(function() {
			$(".leftsidebar_box dd").hide();
			$(".leftsidebar_box dt").click(function() {
				$(".leftsidebar_box dt").css({
					"background-color": "#171616"
				})
				$(this).css({
					"background-color": "1e1d1d"
				});
				$(this).parent().find('dd').removeClass("menu_chioce");
				$(".leftsidebar_box dt img").attr("src", "img/img1/select_xl01.png");
				$(this).parent().find('img').attr("src", "img/img1/select_xl.png");
				$(".menu_chioce").slideUp();
				$(this).parent().find('dd').slideToggle();
				$(this).parent().find('dd').addClass("menu_chioce");
			});
		})
	</script>
</html>